<template>
  <div class="list-content">
    <div v-show="!dialogDetail">
      <el-row type="flex" justify="space-between">
        <el-form :inline="true" :model="formInline" class="demo-form-inline" @submit.native.prevent>
          <el-form-item v-if="isMuilUnitUser">
            <el-select filterable @change="getData(1)" v-model="formInline.orgIds" placeholder="请选择业主单位">
              <el-option
                v-for="item in orgOptions"
                :key="item.organizationId"
                :label="item.shortName"
                :value="item.organizationId">
              </el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item>
            <el-select filterable @change="getData(1)" v-model="formInline.result">
              <el-option label="是否完成" value="-1"></el-option>
              <el-option label="未完成" value="1"></el-option>
              <el-option label="已完成" value="2"></el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item>
            <el-date-picker
              v-model="formInline.time"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              :picker-options="util.intTimePickerOptions()"
              @change="getData(1)"
              >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-input 
            v-model.trim="formInline.taskName" 
            placeholder="请输入任务名称"
            @keyup.enter.native="getData(1)"
            clearable
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button class="form-search-btn" type="primary" @click="getData(1)">查询</el-button>
          </el-form-item>
        </el-form>
        <div class="more-btns">
          <el-dropdown @command="handleCommand">
              <span class="el-dropdown-link">更多操作</span>
              <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="export">按当前条件导出</el-dropdown-item>
              </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-row>
      <el-row class="overclick-wrap" :gutter="40" type="flex" justify="space-between">
        <span style="display:none;">{{freashStaticFlag}}</span>
        <el-col :span="8">
          <div class="item-wrap" @click="formInline.result=-1" :class="formInline.result==-1 ? 'active' : ''">
            <div class="item-content">
              <p class="item-value color-1">{{ staticObj.averagePercent }}</p>
              <p class="item-title">完成率</p>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="item-wrap" @click="formInline.result='2'" :class="formInline.result==2 ? 'active' : ''">
            <div class="item-content">
              <p class="item-value color-2">{{ staticObj.finishedCount}}</p>
              <p class="item-title">已完成巡检</p>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="item-wrap" @click="formInline.result='1'" :class="formInline.result==1 ? 'active' : ''">
            <div class="item-content">
              <p class="item-value color-4">{{ staticObj.unfinishedCount }}</p>
              <p class="item-title">未完成巡检</p>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-table
        v-loading="loading"
        :data="tableData"
        ref="mainTable"
        style="width: 100%">
        <el-table-column
        label="序号"
        type="index"
        width="50">
        </el-table-column>
        <el-table-column
        v-if="isMuilUnitUser"
        prop="orgName"
        label="业主单位">
        </el-table-column>
        <el-table-column
          label="开始时间" width="250px">
          <template slot-scope="scope">
            <p style="line-height: 57px;">
              <i class="el-icon-time"></i>
              <span style="margin-left: 10px;line-height: 57px;">{{ scope.row.createTime }}</span>
            </p>
          </template>
        </el-table-column>
        <el-table-column
          prop="taskName"
          label="任务名称" width="300px">
          <template slot-scope="scope">
            <p style="margin-left: 10px;">{{ scope.row.taskName }}<el-link v-if="scope.row.approvePicUrl" class="trusted-time" @click="openTrustedTimeDialog(scope.row.approvePicUrl, scope.row.certificateUrl)">已通过可信时间认证</el-link></p>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态">
          <template  slot-scope="scope">     
            <el-tag
            :type="util.transInspectStatusTagType(scope.row.status)"  
            disable-transitions>{{util.transInspectStatusText(scope.row.status)}}</el-tag>
          </template>  
        </el-table-column>
        <el-table-column prop="result" label="结果">
          <template  slot-scope="scope">     
            <el-tag
            :type="util.transInspectResultTagType(scope.row.result)"  
            disable-transitions>{{util.transInspectResultText(scope.row.result)}}</el-tag>
          </template>  
        </el-table-column>
        <el-table-column
        prop="finishedPointNum"
        label="完成数量">
        </el-table-column>
        <el-table-column
        prop="unfinishedPointNum"
        label="未完成数量">
        </el-table-column>
        <el-table-column
        prop="finishedPercent"
        label="完成率">
        </el-table-column>
        <el-table-column 
        label="操作"
        width="100">
          <template slot-scope="scope">
            <el-button  @click="showDetail(scope.$index, scope.row)" type="text" size="small">清单</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        @size-change="sizeChange"
        @current-change="pageChange"
        :current-page="formInline.currentPageIndex"
        :page-sizes="[10, 50, 100]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="formInline.currentPageTotal">
      </el-pagination>
    </div>
    
    <transition name="el-zoom-in-top">
      <div v-show="dialogDetail" class="list-content-detailList">
        <!-- <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>巡查记录</el-breadcrumb-item>
          <el-breadcrumb-item>巡查清单</el-breadcrumb-item>
        </el-breadcrumb> -->
        <el-form :inline="true" :model="detailformInline" class="serach-form" @submit.native.prevent>
          <el-form-item>
            <div class="iconfont icon-return return-btn" @click="showDetail" title="返回">{{ selectOrgName }}</div>
          </el-form-item>
          <el-form-item>
            <el-select filterable @change="getDataDetail(1)" v-model="detailformInline.status" placeholder="请选择巡检状态">
              <el-option label="全部巡检状态" value="-1"></el-option>
              <el-option label="待领取" value="0"></el-option>
              <el-option label="巡检中" value="1"></el-option>
              <el-option label="已完成" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select filterable @change="getDataDetail(1)" v-model="detailformInline.result" placeholder="请选择巡检结果">
              <el-option label="全部巡检结果" value="-1"></el-option>
              <el-option label="合格" value="0"></el-option>
              <el-option label="部分不合格" value="1"></el-option>
              <el-option label="全部不合格" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select filterable @change="getDataDetail(1)" v-model="detailformInline.account" placeholder="请选择巡检员">
              <el-option
                v-for="(item,index) in accountOptions"
                :key="index"
                :label="item.name"
                :value="item.accountName">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input 
            v-model.trim="detailformInline.pointName" 
            placeholder="点位名称"
            @keyup.enter.native="getDataDetail(1)"
            clearable
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button class="form-search-btn" type="primary" @click="getDataDetail(1)">查询</el-button>
          </el-form-item>
        </el-form>
        <el-row class="overview-wrap" :gutter="40"  type="flex" justify="space-between">
          <span style="display:none;">{{freashStaticDetailFlag}}</span>
          <el-col :span="6">
            <div class="item-wrap">
              <p class="item-value color-8">{{ detailStaticObj.pointCount || 0 }}</p>
              <p class="item-title">点位总数</p>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="item-wrap">
              <p class="item-value color-3">{{ detailStaticObj.finishedCount || 0 }}</p>
              <p class="item-title">已完成巡检</p>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="item-wrap">
              <p class="item-value color-1">{{ detailStaticObj.unFinishedCount || 0 }}</p>
              <p class="item-title">未完成巡检</p>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="item-wrap">
              <p class="item-value color-4">{{ detailStaticObj.finishedPercent || 0 }}</p>
              <p class="item-title">完成率</p>
            </div>
          </el-col>
        </el-row>
        <el-table
          v-loading="loadingDetail"
          :data="detailTableData"
          ref="detailTable"
          style="width: 100%">
          <el-table-column
          label="序号"
          type="index"
          width="50">
          </el-table-column>
          <el-table-column prop="picUrl" label="点位照片" width="100" >
            <!-- 图片的显示 -->
            <template  slot-scope="scope">            
              <img :src="scope.row.picUrl?scope.row.picUrl.split(',')[0]:defaultImg"  width="50" height="50" @click="$imgPreview" :data-imgpreview="scope.row.picUrl"/>
            </template>         
          </el-table-column>
          <el-table-column
          prop="name"
          label="点位名称">
          </el-table-column>
          <el-table-column
          prop="inspectPointAccount"
          label="巡检员">
          </el-table-column>
          <el-table-column prop="status" label="巡检状态">
            <template  slot-scope="scope">     
              <el-tag
              :type="util.transInspectPointStatusTagType(scope.row.status)"  
              disable-transitions>{{util.transInspectPointStatusText(scope.row.status)}}</el-tag>
            </template>  
          </el-table-column>
          <el-table-column
            label="完成时间">
            <template slot-scope="scope">
              <i class="el-icon-time"></i>
              <span style="margin-left: 10px">{{ scope.row.finishTime }}</span>
            </template>
          </el-table-column>
          <el-table-column
          prop="pointResultDesc"
          label="巡检结果">
          </el-table-column>
          <el-table-column 
          label="操作"
          width="100">
            <template slot-scope="scope">
              <el-button  @click="showPointDetail(scope.$index, scope.row)" type="text" size="small">详情</el-button>
            </template>
          </el-table-column>
          <!-- 展开详情 -->
          <el-table-column type="expand" width="1">
            <template slot-scope="scope">
              <div class="detail-content">
                <p><b>所属巡检路线：</b>{{scope.row.routeName}}</p>
                <p><b>点位地址：</b>{{scope.row.address}}</p>
                <p><b>巡检结果明细：</b></p>
                <p v-for="(item, i) in scope.row.contentResultList" :key="i">{{ item.content + (item.option ? ("&nbsp;&nbsp;&nbsp;&nbsp;"+item.option) :"")}}</p>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          @size-change="detailsizeChange"
          @current-change="detailpageChange"
          :current-page="detailformInline.currentPageIndex"
          :page-sizes="[10, 50, 100]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="detailformInline.currentPageTotal">
        </el-pagination>
      </div>
    </transition>
    <el-dialog
      :close-on-click-modal="false"
      title="可信时间认证"
      width="600px"
      v-if="trustedTimeDialog"
      :visible.sync="trustedTimeDialog"
      @close="trustedTimeDialog = false"
      v-dialogDrag>
      <trusted-time :info="trustedTimeInfo"></trusted-time>
    </el-dialog>
  </div>
</template>

<script>
import util from '@/utils/util'
import TrustedTime from '../Police/Dialog/TrustedTime'
import { getOrgList} from '@/api/org'
import { getUsers} from '@/api/api'
import { getInspectTaskListForClient,getInspectTaskPointListForClient,getInspectTaskPointCountForClient,getInspectTaskCount} from '@/api/inspect'

export default {
  name: 'InspectRecord',
  props:['param'],
  components: {
    TrustedTime
  },
  data () {
    return {
      freashStaticFlag:0,
      freashStaticDetailFlag:0,
      formInline: {
        taskName: '',
        result:'-1',
        orgIds:this.$store.state.userinfo.isMuilUnitUser ? this.$store.state.userinfo.organizationIds : this.$store.state.userinfo.org.id,
        time:'',
        currentPageSize: 10,
        currentPageIndex: 1,
        currentPageTotal: 0
      },
      detailformInline: {
        orgId:this.$store.state.userinfo.isMuilUnitUser ? '' : this.$store.state.userinfo.org.id,
        taskId:'',
        queryType : 1,
        account: '',
        pointName:'',
        status:'-1',
        result:'-1',
        currentPageSize: 10,
        currentPageIndex: 1,
        currentPageTotal: 0
      },
      util:util,
      isMuilUnitUser:this.$store.state.userinfo.isMuilUnitUser,
      accountName:this.$store.state.userinfo.accountName,
      defaultImg: this.GLOBAL.defaultImg,
      tableData: [],//表格数据
      detailTableData: [],//详情表格数据
      staticObj:{},//头部各状态个数统计
      detailStaticObj:{},//详情头部各状态个数统计
      orgOptions: [{organizationId: this.$store.state.userinfo.organizationIds,shortName: "全部业主单位"}],
      accountOptions: [{accountName: '',name: "全部巡检员"}],
      loading: false,
      loadingDetail: false,
      dialogDetail:false,
      selectOrgName: '',
      trustedTimeDialog: false, // 可信时间弹框
      trustedTimeInfo: {}
    }
  },
  created:function() {
      this.getData(1)
     //绑定下拉框
     if(this.isMuilUnitUser)
       getOrgList({queryType: 0}).then((data)=>{
          this.orgOptions.push.apply(this.orgOptions,data.data);
       })
  },
  methods: {
    // 打开可信时间弹框
    openTrustedTimeDialog(picUrl, fileUrl) {
      if(picUrl) {
        this.trustedTimeInfo = {
          picUrl: picUrl,
          fileUrl: fileUrl
        }
      } else {
        this.trustedTimeInfo = {}
      }
      
      this.trustedTimeDialog = true
    },
    showDetail(index, row){
      this.dialogDetail = !this.dialogDetail
      if(row){
        this.detailformInline.taskId = row.id
        this.detailformInline.orgId = row.orgId
        // 初始化查询条件
        this.detailformInline.account = ''
        this.detailformInline.pointName =''
        this.detailformInline.status = '-1'
        this.detailformInline.result = '-1'
        this.detailformInline.currentPageSize = 10
        this.detailformInline.currentPageIndex = 1
        this.selectOrgName = row.orgName
        this.detailStaticObj = {}
        this.detailTableData = []
        this.loadingDetail =true
        //绑定用户下拉框
        getUsers({orgId:this.detailformInline.orgId}).then((data)=>{
            this.accountOptions.push.apply(this.accountOptions,data.data);
            this.getDataDetail(1)
        })
      }
    },
    showPointDetail(index, row){//点位详情
      const $table = this.$refs.detailTable
      row.isExpand = !row.isExpand;//给row一个自定义展开状态
      $table.toggleRowExpansion(row)
    },
    sizeChange(val) {//页码切换
      this.formInline.currentPageIndex = 1;
      this.formInline.currentPageSize = val;
      this.getList() 
    },
    pageChange(val) {//翻页
      this.formInline.currentPageIndex = val;
      this.getList() 
    },
    detailsizeChange(val) {//页码切换
      this.detailformInline.currentPageIndex = 1;
      this.detailformInline.currentPageSize = val;
      this.getDetailList() 
    },
    detailpageChange(val) {//翻页
      this.detailformInline.currentPageIndex = val;
      this.getDetailList() 
    },
    getData(_pageIndex){
      this.getStatis() 
      this.getList(_pageIndex) 
    },
    getList(_pageIndex) {//获取列表
      if(_pageIndex){
        this.formInline.currentPageIndex = _pageIndex
      }
      this.loading =true;
      getInspectTaskListForClient({
        queryType : 1,
        pageIndex: this.formInline.currentPageIndex -1,
        pageSize: this.formInline.currentPageSize,
        orgIds: this.formInline.orgIds,
        startTime:this.formInline.time?this.formInline.time[0]:'',
        endTime: this.formInline.time?this.formInline.time[1]:'',
        result:this.formInline.result,
        taskName: this.formInline.taskName.trim()
      }).then((result) => {
        this.formInline.currentPageTotal = result.total;
        this.tableData = result.data;
        this.loading =false;
      }) 
    },
    getStatis() {//头部统计
      //this.staticObj = {}
      getInspectTaskCount({
        orgIds: this.formInline.orgIds,
        name: this.formInline.taskName.trim(),
        status: -1,//this.formInline.result,
        startTime:this.formInline.time?this.formInline.time[0]:'',
        endTime: this.formInline.time?this.formInline.time[1]:''
      }).then((result) => {
          $.extend(this.staticObj,result.data) 
          this.freashStaticFlag++
      }) 
    },
    getDataDetail(_pageIndex){
      this.getDetailStatis() 
      this.getDetailList(_pageIndex) 
    },
    getDetailStatis(row) {//详情头部统计
      //this.detailStaticObj = {}
      getInspectTaskPointCountForClient({
        taskId: this.detailformInline.taskId,
        status: this.detailformInline.status,
        result:this.detailformInline.result,
        account: this.detailformInline.account,
        pointName: this.detailformInline.pointName.trim(),
      }).then((result) => {
          $.extend(this.detailStaticObj,result.data) 
          this.freashStaticDetailFlag++
      }) 
    },
    getDetailList(_pageIndex) {//获取列表
      if(_pageIndex){
        this.detailformInline.currentPageIndex = _pageIndex
      }
      this.loadingDetail =true;
      getInspectTaskPointListForClient({
        queryType : 1,
        pageIndex: this.detailformInline.currentPageIndex -1,
        pageSize: this.detailformInline.currentPageSize,
        result:this.detailformInline.result,
        account: this.detailformInline.account,
        status: this.detailformInline.status,
        pointName: this.detailformInline.pointName.trim(),
        taskId: this.detailformInline.taskId,
      }).then((result) => {
        this.detailformInline.currentPageTotal = result.total;
        this.detailTableData = result.data;
        this.loadingDetail =false;
      }) 
    },
    // 更多操作
    handleCommand(command) {
      let that = this

      switch (command) {
        case 'export':
          that.exportList()
          return false
        default:
          return false
      } 
    },
    // 按条件导出
    exportList() {
        let that = this
        let downloadUrl = that.GLOBAL.baseURL + 'inspectionNew/exportInspectTaskList?orgIds=' + that.formInline.orgIds + 
                '&startTime=' + (that.formInline.time ? that.formInline.time[0] : '') +
                '&endTime=' + (that.formInline.time ? that.formInline.time[1] : '') +
                '&result=' + that.formInline.result +
                '&taskName=' + (that.formInline.taskName.trim() || '')

        window.open(downloadUrl)
    },
  },
  watch: {
    handlerStatusSelect(val, oldVal) {
      if(val !== oldVal) {
        this.getList(1)
      }
    },
  },
  computed: { 
    handlerStatusSelect() {
      return this.formInline.result
    }
  }
}
</script>
